<template>
  <div>
    <NavHeaer></NavHeaer>
    <NavBread><span slot="Bread">Goods</span></NavBread>
    <div class="accessory-result-page accessory-page">
      <div class="container">
        <div class="filter-nav">
          <span class="sortby">Sort by:</span>
          <a href="javascript:void(0)" class="default cur">Default</a>
          <a href="javascript:void(0)" class="price" @click="sortGoods">Price <svg class="icon icon-arrow-short">
              <use xlink:href="#icon-arrow-short"></use>
            </svg></a>
          <a href="javascript:void(0)" class="filterby stopPop" @click.stop="showFilterPop">Filter by</a>
        </div>
        <div class="accessory-result">
          <!-- filter -->
          <div class="filter stopPop" id="filter" :class="{'filterby-show':filterBy}">
            <dl class="filter-price">
              <dt>Price:</dt>
              <dd><a href="javascript:void(0)">All</a></dd>
              <dd>
                <a href="javascript:void(0)" @click="setPriceFilter('all')" :class="{'cur':priceChecked=='all'}">All
                </a>
              </dd>
              <dd v-for="(item,index) in priceFilter">
                <a href="javascript:void(0)" @click="setPriceFilter(index)" :class="{'cur':priceChecked==index}">{{item.startPrice}} - {{item.endPrice}}</a>
              </dd>
            </dl>
          </div>
          <!-- search result accessories list -->
          <div class="accessory-list-wrap">
            <div class="accessory-list col-4">
              <ul>
                <li v-for="(item,index) in goodsList" :key="item.productId">
                  <div class="pic">
                    <a href="#"><img v-lazy="'static/'+item.productImage" alt=""></a>
                  </div>
                  <div class="main">
                    <div class="name">{{item.productName}}</div>
                    <div class="price">${{item.salePrice}}</div>
                    <div class="btn-area">
                      <a href="javascript:;" class="btn btn--m" @click="addCart(item.productId)">加入购物车</a>
                    </div>
                  </div>
                </li>
              </ul>
              <div v-show="!busy" v-infinite-scroll="loadMore" infinite-scroll-disabled="busy" infinite-scroll-distance="10">
                <img src="./../assets/loading-spinning-bubbles.svg">
              </div>
            </div>
          </div>
        </div>
      </div>
    </div>
    <modal v-bind:mdShow="mdShow" v-on:close="closeModal">
      <p slot="message">
        请先登录,否则无法加入到购物车中!
      </p>
      <div slot="btnGroup">
        <a class="btn btn--m" href="javascript:;" @click="mdShow = false">关闭</a>
      </div>
    </modal>
    <modal v-bind:mdShow="mdShowCart" v-on:close="closeModal">
      <p slot="message">
        <svg class="icon-status-ok">
          <use xmlns:xlink="http://www.w3.org/1999/xlink" xlink:href="#icon-status-ok"></use>
        </svg>
        <span>加入购物车成功!</span>
      </p>
      <div slot="btnGroup">
        <a class="btn btn--m" href="javascript:;" @click="mdShowCart = false">继续购物</a>
        <router-link class="btn btn--m btn--red" href="javascript:;" to="/cart">查看购物车</router-link>
      </div>
    </modal>
    <div class="md-overlay" v-show="overLayFlag" @click.stop="closePop"></div>
    <NavFooter></NavFooter>
  </div>
</template>
<script>
import "@/assets/css/base.css"
import "@/assets/css/product.css"
import NavHeaer from "@/components/Header.vue"
import NavFooter from "@/components/Footer.vue"
import NavBread from "@/components/NavBread.vue"
import Modal from './../components/Modal'
import axios from 'axios'
import VueAxios from 'vue-axios'
export default {
  components: {
    NavHeaer,
    NavFooter,
    NavBread,
    Modal
  },
  data() {
    return {
      goodsList: [],
      sortFlag: true, // 排序规则
      page: 1, // 当前页码
      pageSize: 8, // 每页条数
      mdShow: false, // model -- 
      mdShowCart: false, // model
      priceFilter: [{
          startPrice: '0.00',
          endPrice: '100.00'
        },
        {
          startPrice: '100.00',
          endPrice: '500.00'
        },
        {
          startPrice: '500.00',
          endPrice: '1000.00'
        },
        {
          startPrice: '1000.00',
          endPrice: '5000.00'
        }
      ],
      priceChecked: 'all',
      filterBy: false,
      overLayFlag: false,
      busy: false // 是否启用加载插件标示

    }
  },
  methods: {

    getGoodsList(listPageFlg) {
      let param = {
        page: this.page,
        pageSize: this.pageSize,
        sort: this.sortFlag ? 1 : -1,
        priceLevel: this.priceChecked
      };
      axios.get("/goods/list", { params: param }).then((res) => {
        if (res.data && res.data.status == 0) {

          if (listPageFlg) {
            if (res.data.result.count == 0) {
              this.busy = true;
            } else {
              this.busy = false;
            }
            this.goodsList = this.goodsList.concat(res.data.result.list)

          } else {
            this.goodsList = res.data.result.list
            this.busy = false;
          }



        } else {
          this.goodsList = []
          console.log(res.data.msg)
        }

      })
    },

    // 下拉刷新
    loadMore() {
      this.busy = true;

      setTimeout(() => {
        this.page++
        this.getGoodsList(true)
      }, 1000);
    },
    // 加入购物车
    addCart(productId) {
      let param = {
        productId: productId
      }

      axios.post('/goods/addCart', { params: param }).then((res) => {

        if (res.data && res.data.status == 0) {
          this.mdShowCart = true;
        } else {
          this.mdShow = true;
        }
      })

    },
    // 排序
    sortGoods() {
      this.sortFlag = !this.sortFlag;
      this.page = 1;
      this.getGoodsList();
    },

    setPriceFilter(index) {
      this.priceChecked = index;
      this.page = 1;
      this.getGoodsList();
      // this.closePop()
    },
    closeModal() {
      this.mdShow = false;
      this.mdShowCart = false;
    },
    showFilterPop() {
      this.filterBy = true;
      this.overLayFlag = true;
    },
    closePop() {
      this.filterBy = false;
      this.overLayFlag = false;
      this.mdShowCart = false;
    }
  },
  mounted() {
    this.getGoodsList();
  },
}

</script>
